import { Component } from 'react';
import OptionChecked from 'salt-icon/lib/OptionChecked';
import Cross from 'salt-icon/lib/Cross';
import Upload from 'components/upload';
import { Boxs } from 'saltui';
const { HBox, Box } = Boxs;

export default class Page extends Component {

  render() {
    let t = this;
    let data = t.props.data;
    let topicNo = t.props.topicNo;
    let canToAnswer = t.props.canToAnswer;
    let topicType = data.topicType;
    let list = data.list;
    let settingMap = data.settingMap;
    let score = 0;
    let rightAnswer = '', myAnswer = '', fillInBlanksAnswer = [];
    let needRightAnswer = false;
    let rightMark = (
      <div className="t-MT2 checked t-list-cricle t-checkbox-field-icon-list t-BCsuccess">
        <OptionChecked fill="#fff" width="14px" />
      </div>
    );
    let errorMark = (
      <div className="t-MT2 t-list-cricle t-checkbox-field-icon-list t-BCnred">
        <Cross fill="#fff" width="14px" />
      </div>
    );
    let context = document.getElementById("context").value;
    let token = document.getElementById("token").value;
    let urlPrev = context + '/dingisv/api/common/viewImage?fid=';
    let myValue = '无';
    if (topicType == 'sinselect' || topicType == 'trueOrFalse') {
      for (let i = 0; i < list.length; i++) {
        let item = list[i];
        if (item.mapSet.isRightAnswer == '1') {
          if (item.id == item.answer.answer) {
            score = settingMap.topicScore;
          } else {
            needRightAnswer = true;
          }
          rightAnswer = (
            <HBox className="t-FS16 t-MT6">
              <Box className="t-FCred t-MR28">正确答案：</Box>
              <Box flex={1}>
                <Box flex={1}>{settingMap.ezQuABC == '1' ? item.letter + '.' : ""}{item.name}</Box>
                {item.mapSet.optionImg ?
                  <p><img style={{ height: "100", marginTop: "12px" }} src={urlPrev + item.mapSet.optionImg + '&token=' + token} /></p>
                  : ""
                }
              </Box>
            </HBox>
          );
        }
        if (item.id == item.answer.answer) {
          myValue = '';
          myAnswer = (
            <HBox className="t-FS16">
              <Box>提交答案：</Box>
              <Box className="t-MR10">
                {item.mapSet.isRightAnswer == '1' ? rightMark : errorMark}
              </Box>
              <Box flex={1}>
                <Box flex={1}>{settingMap.ezQuABC == '1' ? item.letter + '.' : ""}{item.name}</Box>
                {item.mapSet.optionImg ?
                  <p><img style={{ height: "100", marginTop: "12px" }} src={urlPrev + item.mapSet.optionImg + '&token=' + token} /></p>
                  : ""
                }
              </Box>
            </HBox>
          );
        }
      }
      if (myValue != '') {
        myAnswer = (
          <HBox className="t-FS16">
            <Box>提交答案：</Box>
            <Box className="t-MR10">
              {errorMark}
            </Box>
            <Box flex={1}>{myValue}</Box>
          </HBox>
        );
      }
    } else if (topicType == 'multiselect') {
      for (let i = 0; i < list.length; i++) {
        let item = list[i];
        if ((item.mapSet.isRightAnswer == '1' && item.id != item.answer.answer) || (item.mapSet.isRightAnswer != '1' && item.id == item.answer.answer)) {
          needRightAnswer = true;
        }
        if (item.answer.answer != null && item.answer.answer != "") myValue = '';
      }
      if (!needRightAnswer) {
        score = settingMap.topicScore;
      }
      rightAnswer = (
        <HBox className="t-FS16 t-MT6">
          <Box className="t-FCred t-MR28">正确答案：</Box>
          <Box flex={1}>
            {list.map(function (ele, i) {
              if (ele.mapSet.isRightAnswer == '1') {
                return (
                  <Box flex={1}>
                    <Box flex={1}>{settingMap.ezQuABC == '1' ? ele.letter + '.' : ""}{ele.name}</Box>
                    {ele.mapSet.optionImg ?
                      <p><img style={{ height: "100", marginTop: "12px" }} src={urlPrev + ele.mapSet.optionImg + '&token=' + token} /></p>
                      : ""
                    }
                  </Box>
                )
              }
            })
            }
          </Box>
        </HBox>
      );
      myAnswer = (
        <HBox className="t-FS16">
          <Box>提交答案：</Box>
          <Box className="t-MR10">
            {needRightAnswer ? errorMark : rightMark}
          </Box>
          <Box flex={1}>
            {myValue == '' ?
              list.map(function (ele, i) {
                if (ele.id == ele.answer.answer) {
                  return (
                    <Box flex={1}>
                      <Box flex={1}>{settingMap.ezQuABC == '1' ? ele.letter + '.' : ""}{ele.name}</Box>
                      {ele.mapSet.optionImg ?
                        <p><img style={{ height: "100", marginTop: "12px" }} src={urlPrev + ele.mapSet.optionImg + '&token=' + token} /></p>
                        : ""
                      }
                    </Box>
                  )
                }
              }) : myValue
            }
          </Box>
        </HBox>
      );
    } else if (topicType == 'answer' || topicType == 'shortAnswer') {
      if (topicType == 'answer') {
        if (settingMap.answer == list[0].answer.answer) {
          score = settingMap.topicScore;
          needRightAnswer = false;
        }
        else needRightAnswer = true;
        rightAnswer = (
          <HBox className="t-FS16 t-MT6">
            <Box className="t-FCred t-MR28">正确答案：</Box>
            <Box flex={1} className="t-WSpre">{settingMap.answer}</Box>
          </HBox>
        );
      } else {
        score = list[0].answer.fraction;
      }
      myAnswer = (
        <HBox className="t-FS16">
          <Box>提交答案：</Box>
          <Box className="t-MR10">
            {topicType == 'answer' ? (needRightAnswer ? errorMark : rightMark) : ""}
          </Box>
          <Box flex={1} className="t-WSpre">{list[0].answer.answer == null || list[0].answer.answer == "" ? myValue : list[0].answer.answer}</Box>
        </HBox>
      );
    } else if (topicType == 'fillInBlanks') {
      for (let i = 0; i < list.length; i++) {
        let item = list[i];
        let flag = false;
        if (item.mapSet.answer == item.answer.answer) flag = true;
        let fbAnswer = (
          <div>
            <HBox className="t-FS16 t-MB6">
              <Box flex={1}>{item.name}</Box>
              <HBox className="t-ML18">
                <Box className="t-W48">得分：</Box>
                <Box className="t-FCred">{item.answer.fraction}</Box>
              </HBox>
            </HBox>
            <HBox className="t-FS16 t-MB6">
              <Box>提交答案：</Box>
              <Box className="t-MR10">
                {flag ? rightMark : errorMark}
              </Box>
              <Box flex={1}>{item.answer.answer == null || item.answer.answer == "" ? myValue : item.answer.answer}</Box>
            </HBox>
            {flag ? '' :
              <HBox className="t-FS16 t-MB6">
                <Box className="t-FCred t-MR28">正确答案：</Box>
                <Box flex={1}>{item.mapSet.answer}</Box>
              </HBox>
            }
          </div>
        );
        fillInBlanksAnswer.push(fbAnswer);
      }
    } else if (topicType == 'field') {
      score = list[0].answer.fraction;
    }

    return (
      <div>
        {topicType == 'sinselect' || topicType == 'trueOrFalse' || topicType == 'multiselect' || topicType == 'answer' || topicType == 'shortAnswer' ?
          <div className="t-PB20">
            <HBox className="t-PR">
              <Box flex={1} className={settingMap.willAnswer == '1' ? "t-FC3 t-FS16 t-PB10 dd-required" : "t-FC3 t-FS16 t-PB10"}>
                <b>{topicNo}. </b>
                <b>{data.topicNameTxt}</b>
                <span className="t-FCddfontblue-40">{'【' + settingMap.topicScore + '分】'}</span>
              </Box>
              <HBox className="t-ML18">
                <Box>得分：</Box>
                <Box className="t-FCred">{score}</Box>
              </HBox>
            </HBox>
            {myAnswer}
            {needRightAnswer && !canToAnswer ? rightAnswer : ''}
          </div>
          : topicType == 'fillInBlanks' ?
            <div className="t-PB20">
              <HBox className="t-PR">
                <Box flex={1} className={settingMap.willAnswer == '1' ? "t-FC3 t-FS16 t-PB10 dd-required" : "t-FC3 t-FS16 t-PB10"}>
                  <b>{topicNo}. </b>
                  <b>{data.topicNameTxt}</b>
                  <span className="t-FCddfontblue-40">{'【' + settingMap.topicScore + '分】'}</span>
                </Box>
              </HBox>
              {fillInBlanksAnswer.map(function (ele, i) {
                return (ele)
              })}
            </div>
            : topicType == 'field' ?
              <div className="t-PB20">
                <HBox className="t-PR">
                  <Box flex={1} className={settingMap.willAnswer == '1' ? "t-FC3 t-FS16 t-PB10 dd-required" : "t-FC3 t-FS16 t-PB10"}>
                    <b>{topicNo}. </b>
                    <b>{data.topicNameTxt}</b>
                    <span className="t-FCddfontblue-40">{'【' + settingMap.topicScore + '分】'}</span>
                  </Box>
                  <HBox className="t-ML18">
                    <Box>得分：</Box>
                    <Box className="t-FCred">{score}</Box>
                  </HBox>
                </HBox>
                <HBox className="t-FS16">
                  <Box>提交答案：</Box>
                  <Box flex={1}>
                    {list[0].answer.attachment == null ? myValue :
                      <Upload
                        canAdd={false}
                        canDel={false}
                        initList={JSON.parse(list[0].answer.attachment)}
                        dir="questionnaire" />
                    }
                  </Box>
                </HBox>
              </div>
              :
              ""
        }

      </div>
    );
  }
}



